<!-- <template>
  <div>
    <div ref="amap"></div>
    <input
      type="text"
      id="map_input"
      v-model="searchVal"
      placeholder="请输入关键词搜索"
    />
  </div>
</template>  
  
<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  data() {
    return {
      map: null,
      searchVal: "",
    };
  },
  mounted() {
    this.loadAMap();
  },
  beforeDestroy() {
    if (this.map) {
      this.map.destroy();
      this.map = null;
    }
  },
  methods: {
    loadAMap() {
      AMapLoader.load({
        key: "857e8d2b7941c47485a8a0092075685f", // Web端JS API key
        version: "2.0",
        plugins: ["AMap.Scale", "AMap.ToolBar"],
      })
        .then((AMap) => {
          this.initMap(AMap);
        })
        .catch((e) => {
          console.error(e);
        });
    },
    initMap(AMap) {
      this.map = new AMap.Map(this.$refs.amap, {
        resizeEnable: true, // 城市定位
        zooms: [1, 18],
        zoom: 14,
      });

      // 比例尺
      this.map.addControl(new AMap.Scale());
      // 工具条
      this.map.addControl(new AMap.ToolBar());

      // 标记
      let marker = new AMap.Marker({
        title: "长安街1号",
        position: this.map.getCenter(),
      });
      this.map.add(marker);

      // 关键字搜索
      AMap.plugin(["AMap.PlaceSearch", "AMap.AutoComplete"], () => {
        let auto = new AMap.AutoComplete({ input: "map_input" });
        let placeSearch = new AMap.PlaceSearch({ map: this.map }); // 构造地点查询类
        // 注册监听，当选中某条记录时会触发
        auto.on("select", (e) => {
          placeSearch.setCity(e.poi.adcode);
          placeSearch.search(e.poi.name); // 关键字查询查询
        });
      });
    },
  },
};
</script>  
  
<style lang="scss" scoped>
.amap {
  width: 100%;
  height: calc(100vh - 284px);
  border: 1px solid #ccc;
  position: relative;

  .amap_view {
    width: 100%;
    height: 100%;
  }
  .el-input {
    width: 256px;
    position: absolute;
    top: 10px;
    right: 10px;
  }
}
</style> -->

<template>
  <div>
    <div id="amap" ref="amap"></div>
    <input
      type="text"
      id="map_input"
      v-model="searchVal"
      placeholder="请输入关键词搜索"
    />
  </div>
</template>  
  
<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  data() {
    return {
      map: null,
      searchVal: "",
    };
  },
  mounted() {
    this.loadAMap();
  },
  beforeDestroy() {
    if (this.map) {
      this.map.destroy();
      this.map = null;
    }
  },
  methods: {
    loadAMap() {
      AMapLoader.load({
        key: "e5761f5df1d30e2ffedee67d693ff590",
        version: "2.0",
        plugins: ["AMap.Scale", "AMap.ToolBar"],
      })
        .then((AMap) => {
          this.$nextTick(() => {
            this.initMap(AMap);
          });
        })
        .catch((e) => {
          console.error(e);
        });
    },
    initMap(AMap) {
      this.map = new AMap.Map(this.$refs.amap, {
        resizeEnable: true,
        zooms: [3, 18], // 设置合适的缩放级别范围
        zoom: 10, // 设置初始缩放级别
      });

      // 比例尺
      map.addControl(new AMap.Scale());
      // 工具条
      map.addControl(new AMap.ToolBar());

      // 标记
      let maker = new AMap.Marker({
        title: "长安街1号",
        position: map.getCenter(),
      });
      map.add(maker);

      // 关键字搜索
      AMap.plugin(["AMap.PlaceSearch", "AMap.AutoComplete"], function () {
        let auto = new AMap.AutoComplete({ input: "map_input" });
        let placeSearch = new AMap.PlaceSearch({ map: map }); //构造地点查询类
        //注册监听，当选中某条记录时会触发
        auto.on("select", function (e) {
          placeSearch.setCity(e.poi.adcode);
          placeSearch.search(e.poi.name); //关键字查询查询
        });
      });
    },
  },
};
</script>  
  
<style scoped>
#amap {
  width: 100%;
  height: 400px; /* 设置合适的高度 */
}
</style>